import React from 'react';
import { useCallback } from 'react';

import studentData from '../mock/students';

import MyButton from './components/MyButton';
import MyCheckBox from './components/MyCheckbox';
import MyCheckboxList from './components/MyCheckboxList';

function App() {
  const doClick = () => {
    console.log('doClick');
  };

  const doChange = (e) => {
    console.log('doChange', e);
  };

  //useCallback缓存一个函数 父组件进行更新创建新的引用造成子组件不必要渲染
  const getCheckedData = useCallback((data) => {
    console.log('getCheckedData', data);
  });

  return (
    <div>
      <h1>React Hook 封装UI组件封装</h1>
      <h4>按钮：</h4>
      <MyButton type="success" onClick={doClick}>
        Click
      </MyButton>
      <hr />
      <h4>复选框：</h4>
      <MyCheckBox checked={true} onChange={doChange}>
        This is a test checkbox
      </MyCheckBox>
      <hr />
      <h4>动态列表渲染(单选全选):</h4>
      {/* 定义配置：
        headerCells： 标题文本内容,
        allCheckedTip: 全部,
        onCheckDataChange: 选中哪些数据
      */}
      <MyCheckboxList
        data={studentData}
        headerCells={['选择', 'ID', '姓名', '分数', '删除']}
        allCheckedTip={{ all: '全部选择', none: '全部撤销' }}
        onCheckedDataChange={getCheckedData}
      ></MyCheckboxList>
    </div>
  );
}

export default App;
